<template>
	<div class="yingmoo-shoppingcart">
		<ym-memberheader></ym-memberheader>
		<div class="yingmoo-memberbanner">
			<div class="nav">
				<div class="yingmoo-logo">
					<router-link tag="div" to="/"><img src="../assets/ym-member/yingmoo-logo.png" /></router-link>
					<p>购物车</p>
				</div>
				<el-steps :active="1" align-center>
					<el-step title="我的购物车"></el-step>
					<el-step title="提交订单"></el-step>
					<el-step title="确认订单"></el-step>
					<el-step title="上传合同"></el-step>
				</el-steps>
			</div>
		</div>
		<div class="indent-list">
			<ul class="indent-head">
				<li>媒体名称</li>
				<li>规格</li>
				<li>投放周期</li>
				<li>排期/执行时间</li>
				<li>执行价格</li>
				<li>操作</li>
			</ul>
			<div v-for='cart in carts' :key="cart">
				<div style="width: 100%; height: 35px;">
					<span style="height: 35px;line-height: 35px;margin-left: 25px;color:#999999 ">{{cart.companyName}}</span>
				</div>
				<div class="indent-odd">
					<div class="one">
						<div class="one-div">
							<input class="check" name="check" type="checkbox" :value="cart.cartId" @change="getNum"/>
							<label><img width="180px" height="117px" :src="cart.cover" /></label>
						</div>
						<div class="two-div">
							<h1>{{cart.mediaName}}</h1>
							<p>{{cart.category}}</p>
							<p>{{cart.area}}</p>
						</div>
					</div>
					<div class="two">
						<p>{{cart.width}}m * {{cart.height}}m</p>
					</div>
					<div class="three">
						<p>{{cart.minCycle}}</p>
					</div>
					<div class="for">
						<el-date-picker class="data" type="date" v-model="cart.startTime" placeholder="开始时间" style="width: 140px;"></el-date-picker>
						<el-date-picker class="data" type="date" v-model="cart.endTime" placeholder="结束时间" style="width: 140px;" @change="pickDate(cart.cartId,cart.startTime,cart.endTime)"></el-date-picker>
					</div>
					<div class="six">
						<p>{{cart.price}}{{cart.pirceUnit}}</p>
						<!--<p>{{cart.mediaData.discountPrice}}</p>-->
					</div>
					<div class="five">
						<p @click="deleteOne(cart.cartId)">删除</p>
						<p class="color" @click="addAttention(cart.mediaId,cart.cartId)">移至我的收藏</p>
					</div>
				</div>
			</div>
			<div class="indent-foot">
				<ul class="last">
					<li>
						<input type="checkbox" id="over" @change="selectAll();getNum()"/>
						<label for="over">全选</label>
					</li>
					<li @click="deletebatch">删除选中的资料</li>
					<li>移至我的收藏</li>
					<li>
						已选<span>{{selected}}</span>个媒体
					</li>
					<li>
						<!--总价：<span>￥0.00</span>元-->
					</li>
					<li @click="commit">去结算</li>
					<!--<router-link tag="li" to="/ymShoppingcartcommit">去结算</router-link>-->
				</ul>
			</div>
		</div>
		<!--  推荐媒体  -->
		<!--<div class="recommend-media">
			<div class="recommend">
				<h3>推荐媒体</h3>
				<h3>我的足迹</h3>
			</div>
			<div class="recommend-model" v-show="shos=1">
				<div class="model" v-for="lastest in lastest">
					<img src="../assets/ym-member/model-img.png" />
					<h2>{{lastest.name}}</h2>
					<p class="money">{{lastest.price}}</p>
					<p class="place">{{lastest.remark}}<span>{{lastest.look}}</span></p>
				</div>
			</div>
			<div class="recommend-model" v-show="shos=2">
				<div class="model" v-for="lastest in lastest">
					<img src="../assets/ym-member/model-img.png" />
					<h2>{{lastest.name}}</h2>
					<p class="money">{{lastest.price}}</p>
					<p class="place">{{lastest.remark}}<span>{{lastest.look}}</span></p>
				</div>
			</div>
		</div>-->
		<ym-detailsfooter></ym-detailsfooter>
	</div>
</template>
<script>
import ymMemberheader from "@/components/ymMemberheader.vue";
import ymDetailsfooter from "@/components/ymDetailsfooter.vue";
export default {
  name: "yingmoo-media",
  components: {
    ymMemberheader,
    ymDetailsfooter
  },
  data() {
    return {
      requestAddr: this.GLOBAL.addr,
      user: {},
      carts: {},
      orders: [],
      startTime: "",
      endTime: "",
      text: [
        {
          textheadline: "媒体标题媒体标题媒体标题",
          texttype: "机场媒体",
          textfrom: "灯箱",
          textlocation: "北京",
          textplace: "海淀区",
          textname: "媒体主公司名称",
          textsize: "13m*9m",
          textdeadline: "月",
          texttime: "2017-11-23",
          textoriginal: "￥880000.00",
          textprice: "￥880000.00",
          textstate: "删除",
          textbtn: "移至我的收藏"
        },
        {
          textheadline: "媒体标题媒体标题媒体标题",
          texttype: "机场媒体",
          textfrom: "灯箱",
          textlocation: "北京",
          textplace: "海淀区",
          textname: "媒体主公司名称",
          textsize: "13m*9m",
          textdeadline: "月",
          texttime: "2017-11-23",
          textoriginal: "￥880000.00",
          textprice: "￥880000.00",
          textstate: "删除",
          textbtn: "移至我的收藏"
        },
        {
          textheadline: "媒体标题媒体标题媒体标题",
          texttype: "机场媒体",
          textfrom: "灯箱",
          textlocation: "北京",
          textplace: "海淀区",
          textname: "媒体主公司名称",
          textsize: "13m*9m",
          textdeadline: "月",
          texttime: "2017-11-23",
          textoriginal: "￥880000.00",
          textprice: "￥880000.00",
          textstate: "删除",
          textbtn: "移至我的收藏"
        },
        {
          textheadline: "媒体标题媒体标题媒体标题",
          texttype: "机场媒体",
          textfrom: "灯箱",
          textlocation: "北京",
          textplace: "海淀区",
          textname: "媒体主公司名称",
          textsize: "13m*9m",
          textdeadline: "月",
          texttime: "2017-11-23",
          textoriginal: "￥880000.00",
          textprice: "￥880000.00",
          textstate: "删除",
          textbtn: "移至我的收藏"
        },
        {
          textheadline: "媒体标题媒体标题媒体标题",
          texttype: "机场媒体",
          textfrom: "灯箱",
          textlocation: "北京",
          textplace: "海淀区",
          textname: "媒体主公司名称",
          textsize: "13m*9m",
          textdeadline: "月",
          texttime: "2017-11-23",
          textoriginal: "￥880000.00",
          textprice: "￥880000.00",
          textstate: "删除",
          textbtn: "移至我的收藏"
        }
      ],
      lastest: [
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        },
        {
          name: "媒体名称媒体名称媒体名称",
          price: "价格：120万 元/年",
          remark: "北京西站",
          look: "看板"
        }
      ],
      selected: 0
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    getUser: function() {
      var data = localStorage.getItem("user");
      if (data != null) {
        this.user = JSON.parse(localStorage.getItem("user"));
        this.getCartList();
      }
    },
    //获取相关的购物车中的信息
    getCartList: function() {
      this.$http
        .post(
          this.requestAddr + "/GetJson/toMyCart",
          {
            advertiserId: this.user.autoId
          },
          {
            emulateJSON: true
          }
        )
        .then(res => {
          this.carts = res.data.cart;
          console.log(this.carts);
        });
    },
    //提交选中数据，生成订单
    commit() {
      var cartsId = this.multSelect();
      if (cartsId.length == 0) {
        alert("请先选择商品！");
        return;
      }
      sessionStorage.setItem("carts", cartsId);
      window.location.href = "../#/ymShoppingcartcommit";
      /*this.$http.post(this.requestAddr+"/GetJson/createOrder",{"cartIds":cartsId,"advertiserId":this.user.autoId},{emulateJSON:true}).then(
					(res)=>{
						if(res.data.code == 0){
							window.location.href = "../#/ymShoppingcartcommit";
						}
					}
				)*/
    },
    pickDate(cartId, startTime, endTime) {
      var cart = new Object();
      cart.cartId = cartId;
      if (startTime == "" || startTime == null) {
        alert("请先选择投放开始时间！");
        return;
      } else if (startTime >= endTime) {
        alert("投放结束时间不能先于开始时间！");
        return;
      } else {
        cart.startTime = this.GMTToStr(startTime);
        cart.endTime = this.GMTToStr(endTime);
        console.log(cart);
        this.$http
          .post(this.requestAddr + "/GetJson/pickDate", cart, {
            emulateJSON: true
          })
          .then();
      }
    },
    //添加关注
    addAttention: function(mediaId, cartId) {
      this.$confirm("确认将该商品移至关注中心吗？", "确认提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http
          .post(
            this.requestAddr + "/GetJson/addAttention",
            { userId: this.user.autoId, mediaId: mediaId, type: 1 },
            { emulateJSON: true }
          )
          .then(res => {
            if (res.data.code == 0) {
              this.$http
                .post(
                  this.requestAddr + "/GetJson/deleteCartMedia",
                  { cartId: cartId },
                  { emulateJSON: true }
                )
                .then(res => {
                  if (res.data.code == 0) {
                    this.getCartList();
                  }
                });
            }
          });
      });
    },
    //获取选中的数据条数
    getNum: function() {
      var selectNum = 0;
      var options = document.getElementsByName("check");
      for (var i = 0; i < options.length; i++) {
        if (options[i].checked == true) {
          selectNum += 1;
        }
      }
      this.selected = selectNum;
    },
    //全选
    selectAll: function() {
      var selAll = document.getElementById("over");
      var options = document.getElementsByName("check");
      for (var i = 0; i < options.length; i++) {
        options[i].checked = selAll.checked;
      }
    },
    //获取被选中的复选框中的值，并返回一个数组
    multSelect: function() {
      var options = document.getElementsByName("check");
      var cartIds = new Array();
      var index = 0;
      if (options.length <= 0) {
        alert("请先选择相关商品数据！");
        return;
      }
      for (var i = 0; i < options.length; i++) {
        if (options[i].checked == true) {
          cartIds[index] = options[i].value;
          index++;
        }
      }
      return cartIds;
    },
    //删除单条数据
    deleteOne: function(cartId) {
      this.$confirm("确认删除该商品吗？", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log(cartId);
        this.$http
          .post(
            this.requestAddr + "/GetJson/AdOrders/deleteMediaFromCart",
            { cartId: cartId },
            { emulateJSON: true }
          )
          .then(res => {
            console.log(res.data);
            this.getCartList();
          });
      });
    },
    //批量删除选中的数据
    deletebatch: function() {
      var cartIds = this.multSelect();
      if (cartIds.length == 0) {
        alert("请先选择商品！");
        return;
      }
      this.$confirm("确认选中的商品吗？", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http
          .post(
            this.requestAddr + "/GetJson/AdOrders/deleteMediaFromCartBatch",
            { cartIds: JSON.stringify(cartIds) },
            { emulateJSON: true }
          )
          .then(res => {
            console.log(res.data);
            this.getCartList();
          });
      });
    },
    GMTToStr: function(time) {
      //格林威治时间转换为自定义字符串形式
      let date = new Date(time);
      let Str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return Str;
    },
    StrToGMT: function(time) {
      //字符串格式时间转换成格林威治时间
      let GMT = new Date(time);
      return GMT;
    }
  }
};
</script>
<style>
.el-input__inner {
  width: 140px;
}
.el-steps {
  width: 380px;
  height: 20px;
  align-items: center;
}

.el-step__icon {
  width: 22px;
  height: 22px;
}

.el-step__title {
  font-size: 12px;
  line-height: 25px;
}

.el-step__title.is-process {
  color: #c0c4cc;
}

.el-step__icon.is-text {
  color: white;
  background-color: #1b8cd9;
}

.el-step__head.is-process {
  border-color: #1b8cd9;
}

.el-step__head.is-wait {
  border-color: #1b8cd9;
}

.el-step__head.is-finish {
  border-color: #f29600;
}

.el-step__title.is-finish {
  color: #f29600;
}
</style>
<style scoped lang="less">
.data {
  width: 140px;
  height: 30px;
}
.el-input__inner {
  width: 145px;
}
.yingmoo-shoppingcart {
  background-color: #f3f9ff;
  .yingmoo-memberbanner {
    width: 100%;
    height: 62px;
    background-color: #036eb7;
    .nav {
      width: 1200px;
      height: 62px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .yingmoo-logo {
        width: 252px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        p {
          color: #6998d4;
          font-size: 14px;
          line-height: 43px;
        }
      }
    }
  }
  .indent-list {
    width: 1200px;
    margin: 0 auto;
    background-color: white;
    margin-top: 25px;
    .indent-head {
      width: 1200px;
      height: 42px;
      font-size: 16px;
      display: flex;
      background-color: #f2f2f2;
      li {
        text-align: center;
        line-height: 42px;
        color: #666666;
        &:nth-child(1) {
          width: 474px;
        }
        &:nth-child(2) {
          width: 171px;
        }
        &:nth-child(3) {
          width: 111px;
        }
        &:nth-child(4) {
          width: 150px;
        }
        &:nth-child(5) {
          width: 186px;
        }
        &:nth-child(6) {
          width: 162px;
        }
      }
    }
    .indent-odd {
      display: flex;
      height: 142px;
      border-bottom: 1px solid #f2f2f2;
      border-top: 2px solid #1578bc;
      .one {
        width: 474px;
        display: flex;
        align-items: center;
        background-image: url(../assets/ym-member/cut-off-rule.png);
        background-repeat: no-repeat;
        background-position: right;
        .one-div {
          display: flex;
          align-items: center;
          input {
            margin-left: 25px;
          }
          label {
            margin-left: 10px;
          }
        }
        .two-div {
          width: 185px;
          font-size: 14px;
          line-height: 32px;
          padding-left: 30px;
          h1 {
            font-weight: bold;
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p {
            color: #999999;
          }
        }
      }
      .two {
        width: 171px;
        line-height: 142px;
        background-image: url(../assets/ym-member/cut-off-rule.png);
        background-repeat: no-repeat;
        background-position: right;
        p {
          color: #999999;
          font-size: 14px;
          text-align: center;
        }
      }
      .three {
        width: 111px;
        background-image: url(../assets/ym-member/cut-off-rule.png);
        background-repeat: no-repeat;
        background-position: right;
        p {
          width: 100%;
          font-size: 14px;
          color: #999999;
          text-align: center;
          line-height: 142px;
        }
      }
      .for {
        width: 150px;
        color: #999999;
        font-size: 14px;
        text-align: center;
        background-image: url(../assets/ym-member/cut-off-rule.png);
        background-repeat: no-repeat;
        background-position: right;
        line-height: 65px;
        .btn {
          width: 123px;
          height: 28px;
          line-height: 28px;
          border: 1px solid #dddddd;
          margin: 0 auto;
          border-radius: 3px;
          &:nth-child(1) {
            margin-top: 25px;
          }
        }
        p {
          line-height: 30px;
        }
      }
      .five {
        width: 186px;
        text-align: center;
        color: #999999;
        font-size: 14px;
        cursor: pointer;
        p {
          text-align: center;
          &:nth-child(1) {
            color: #999999;
            margin-top: 33px;
            line-height: 50px;
          }
          &:nth-child(2) {
            color: #f39e26;
            font-weight: bold;
          }
        }
      }
      .six {
        width: 162px;
        background-image: url(../assets/ym-member/cut-off-rule.png);
        background-repeat: no-repeat;
        background-position: right;
        p {
          text-align: center;
          &:nth-child(1) {
            text-decoration: line-through;
            color: #999999;
            margin-top: 33px;
            line-height: 50px;
          }
          &:nth-child(2) {
            color: #f39e26;
            font-weight: bold;
          }
        }
      }
    }
    .indent-foot {
      width: 1200px;
      height: 46px;
      .last {
        width: 1200px;
        height: 46px;
        background-color: #f2f2f2;
        line-height: 46px;
        margin: 0 auto;
        margin-top: 18px;
        li {
          font-size: 14px;
          color: #666666;
          margin-left: 30px;
          cursor: pointer;
          float: left;
          &:nth-child(1) {
            margin-left: 15px;
            padding-left: 0;
          }
          &:nth-child(2) {
            &:hover {
              color: #f29600;
            }
          }
          &:nth-child(3) {
            &:hover {
              color: #f29600;
            }
          }
          &:nth-child(4) {
            margin-left: 474px;
            span {
              color: #f29600;
              font-weight: bold;
              font-size: 18px;
            }
          }
          &:nth-child(5) {
            span {
              color: #f29600;
              font-weight: bold;
              font-size: 18px;
            }
          }
          &:nth-child(6) {
            width: 130px;
            height: 46px;
            background-color: #f29600;
            color: white;
            font-weight: bold;
            font-size: 18px;
            text-align: center;
            margin-left: 60px;
            float: right;
            &:hover {
              color: #8e5800;
            }
          }
        }
      }
    }
  }
  .recommend-media {
    width: 1200px;
    height: 555px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
    .recommend {
      font-size: 14px;
      color: #666666;
      border-bottom: 2px solid #1478bc;
      line-height: 26px;
      font-weight: bold;
      display: flex;
      h3 {
        &:nth-child(1) {
          color: #1478bc;
        }
        &:nth-child(2) {
          margin-left: 20px;
        }
      }
    }
    .recommend-model {
      width: 1200px;
      height: 540px;
      .model {
        width: 224px;
        height: 235px;
        background-color: white;
        margin-top: 20px;
        margin-left: 20px;
        float: left;
        &:nth-child(1) {
          margin-left: 0;
        }
        &:nth-child(6) {
          margin-left: 0;
        }
        h2 {
          font-size: 16px;
          color: #333333;
          padding-left: 15px;
          line-height: 25px;
          padding-top: 5px;
        }
        p {
          font-size: 14px;
          padding-left: 15px;
          line-height: 25px;
        }
        .money {
          color: #f29600;
        }
        .place {
          color: #999999;
          span {
            padding-left: 12px;
          }
        }
      }
    }
  }
}
</style>